import React, { Component } from 'react'
// 原生js解决this指向方案
//  + 1.箭头函数
//  + 2.call/apply/bind
// react事件中的this解决方案
//  + 1.箭头函数
//  + 2.bind

class App extends Component {
  count = 100

  // 箭头函数
  // addCount = (e) => {
  //   this.count++
  //   this.forceUpdate()
  // }
  // addCount(e, n) {
  //   console.log(e)
  //   this.count += n
  //   this.forceUpdate()
  // }

  // bind
  // addCount(n, evt) {
  //   this.count += n
  //   this.forceUpdate()
  // }

  // 提高性能 -- 了解一下
  // 如果你子类中使用了构造函数,则一定要调用一下父类构造函数 con
  // 构造函数只会初始化时执行1次
  constructor(props) {
    super(props)
    this.addCount = this.addCount.bind(this)
  }

  addCount(e) {
    this.count++
    this.forceUpdate()
  }

  render() {
    // render函数它会执行N次
    return (
      <div>
        <h3>{this.count}</h3>
        <hr />
        {/* 箭头函数 */}
        {/* <button onClick={this.addCount}>++count++</button> */}
        {/* 此方案在项目中使用的还比较的多,它可以传数据  *** */}
        {/* <button onClick={(e) => this.addCount(e, 10)}>++count++</button> */}
        {/* bind */}
        {/* <button onClick={this.addCount.bind(this)}>++count++</button> */}
        {/* bind也有一些公司要求用bind来完成this的改变,它也可以传参数 *** */}
        {/* <button onClick={this.addCount.bind(this, 20)}>++count++</button> */}

        <button onClick={this.addCount}>++count++</button>
      </div>
    )
  }
}

export default App
